<template>
  <div id="othersPage" :style="{ backgroundColor: info.main_color }">
    <c-title :hide="false" :text='info.title?info.title:"专题页"'></c-title>
    <div class="banner" v-if="info.banner">
      <img :src="info.banner" alt="" />
    </div>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in list" :key="index" @click="toGoods(item.id)">
        <div class="image">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="bottom">
          <div class="title">{{item.title}}</div>
          <div class="bottom_main">
            <div class="price">{{$i18n.t('money')}}{{item.price}}</div>
            <div class="buyBtn">
              <i class="iconfont icon-gaiicon-"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      list: [],
      topic_id: "",
      info: [],
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    window.scrollTo(0, 0);
    if (this.$route.params.id) {
      this.topic_id = this.$route.params.id;
      this.getinfo();
      this.getData();
    }
  },
  methods: {
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 1;
      this.list = [];
    },
    toGoods(id){
      this.$router.push(this.fun.getUrl("goods", { id: id }));
    },
    getinfo() {
      let urls = "plugin.project-template.frontend.topic.getTopicByTopicId";
      $http
        .get(
          urls,
          {
            topic_id: this.topic_id
          },
          "生成中"
        )
        .then(response => {
          if (response.result === 1) {
            this.info = response.data;
            this.fun.setWXTitle(this.info.title?this.info.title:"专题页");
          } else {
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData() {
      let urls = "plugin.project-template.frontend.topic.getTopicGoodsByTopicId";
      $http
        .get(
          urls,
          {
            page: this.page,
            topic_id: this.topic_id
          },
          "生成中"
        )
        .then(response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.list = response.data.data;
            console.log(this.list);
          } else {
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      let urls = "plugin.project-template.frontend.topic.getTopicGoodsByTopicId";
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            urls,
            {
              page: this.page,
              topic_id: this.topic_id
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                let myData = response.data.data;
                this.list = this.list.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
              }
            },
            response => {
              Toast(response.msg);
            }
          )
          .catch(err => {
            console.error(err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#othersPage {
  min-height: 100vh;
}

.banner {
  width: 100%;
  display: flex;

  img {
    width: 100%;
    height: auto;
  }
}

.listBox {
  padding: 0.94rem 0.94rem 1.5rem 0.94rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .lis {
    margin-bottom: 0.625rem;
    background: #fff;
    padding-bottom: 1rem;
    width: 10.47rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.31rem;

    .image {
      flex-shrink: 0;
      height: 10.47rem;
      border-radius: 0.31rem 0.31rem 0 0;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem 0.31rem 0 0;
      }
    }

    .bottom {
      flex: 1;
      padding: 0.63rem 0.28rem 0 0.53rem;
      overflow: hidden;

      .title {
        text-align: left;
        font-size: 0.81rem;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.59rem;
      }

      .bottom_main {
        display: flex;
        justify-content: space-between;
        align-content: center;

        .price {
          font-size: 0.85rem;
          color: #ff464c;
          line-height: 26px;
        }

        .buyBtn {
          border-radius: 100%;
          width: 26px;
          height: 26px;
          border: solid 0.5px #ff2c29;
          color: #ff2c29;
          display: flex;
          align-items: center;
          justify-content: center;

          .iconfont {
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>